<template>
	<view class="container">
		<view class="cu-card">
			<view class="logo">
				<image src="@/static/images/ui-40/logo.png"></image>
			</view>

			<view class="login_box">
				<view class="login_titp">欢迎登录</view>
				<view class="cu-form-group" style="margin-bottom:20px;margin-top:10px;">
					<!-- <view class="title">账号</view> -->
					<image class="lg_img" src="@/static/images/ui-40/1.png" style="width:40rpx;height:38rpx;"></image>
					<input class="input-input" type="text" v-model="username" placeholder="请输入手机号码" maxlength="11" />
				</view>
				<view class="cu-form-group" style="margin-bottom:20px;margin-top:10px;">
					<!-- <view class="title">密码</view> -->
					<image class="lg_img" src="@/static/images/ui-40/2.png" style="width: 40rpx;height:40rpx;"></image>
					<input type="password" password v-model="password" placeholder="请输入密码" />
				</view>
				
				<view class="cu-form-group " style="margin-bottom:10px;margin-top:10px;">
					<image class="lg_img" src="@/static/images/ui-40/3.png" style="width: 40rpx;height:40rpx;"></image>
					<input class="input-input" type="text" v-model="captcha" placeholder="请输入验证码" />
		     <img :src="captchaImageUrl" @click="refreshCaptcha" style="max-width: 80px; max-height: 50px; z-index: 999;" />
				</view>		
				
				<view class="cu-list">
					<view class="cu-item" @click="navToUrl('/pages/reg/reg')">
						<text>立即注册</text>
					</view>
					<view class="cu-item" @click="navToUrl('/pages/reset/reset')">
						<text>忘记密码</text>
					</view>
				</view>
				<button class="cu_btn" type="button" @click="dologin">登录</button>
			</view>	
			<!-- <view class="cu-form-group margin-lr-lg padding-0 submit_btn" style="border-bottom: 0; margin-bottom: 0;">

			</view> -->
			<view class="text-center padding-top-10" style="font-size: 14px; ">
				<text class="">
					已阅读并同意 
					<text @click="navToUrl('/pages/help/other?type=agreement')" style="color: #4f8dfe;">《用户协议》</text>
					和 
					<text @click="navToUrl('/pages/help/other?type=privacy')" style="color: #4f8dfe;">《隐私政策》</text>
				</text>
			</view>
<!--			<view style="font-size: 14px;padding-top: 10rpx">版本号 1.3.38</view>-->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				logo_img:'',
				now:this.helper.now(),
				webtitle:this.webtitle,
				weburl:this.weburl,
				isChecked:true,
				username:"",
				password:"",
				captcha: '', // 用于存储用户输入的验证码
				uniqid:'',
				captchaImageUrl: '', // 用于存储图形验证码的 URL
			}
		},
		onLoad: function (option) {
		
		},
        mounted() {
            // 页面加载时获取一次验证码
            this.refreshCaptcha();
        },		
		methods: {
			// 获取验证码图片
			
			refreshCaptcha:function(){
				
				let timestamp = this.helper.now();
				let sign = this.helper.setSign(['type=captcha','timestamp='+timestamp]);
				this.helper.req({
					api:"getCaptcha",
					timestamp:timestamp,
					data:{type:"captcha"},
					//header:{sign:sign},
					header:{
						"Content-Security-Policy": "upgrade-insecure-requests",
						"X-Requested-With": "XMLHttpRequest",
						sign:sign
					},
					dataType:'json',
					method:'POST',
				}).then(res=>{

						if(res.data.message == 'ok'){
							this.captchaImageUrl = res.data.data.image;
							this.uniqid= res.data.data.uniqid
						}else{
							this.captchaImageUrl ="";
							this.uniqid= "";
						} 
					uni.hideLoading();
				})				
			},
			
			dologin:function(){
				if(this.username == ''){
					uni.showToast({
						title:"请输入手机号",
						icon:"none"
					})
					return;
				}
				if(this.password == ''){
					uni.showToast({
						title:"请输入密码",
						icon:"none"
					})
					return;
				}
                if(this.captcha == ''){
					uni.showToast({
						title:"请输入验证码",
						icon:"none"
					})
					return;
				}

				// 生成签名
				let timestamp =  this.helper.now();
				let sign =  this.helper.setSign(['username='+this.username,"password="+this.password,'captcha='+this.captcha,'timestamp='+timestamp,'uniqid='+this.uniqid]);
				this.helper.req({
					api:"login",
					timestamp:timestamp,
					data:{username:this.username,password:this.password,captcha:this.captcha,uniqid:this.uniqid},
					header:{
						sign: sign
					}
				}).then(res=>{
					uni.setStorageSync('userinfo',res.data.data);
					
					uni.reLaunch({
						url:"../user/person"
					})
				});
			},
			// 链接
			navToUrl:function(url){
				uni.navigateTo({
					url: url,
				});	
			},
		}
	}
</script>

<style lang="scss">
	page {
		// background: #ffffff;
		background-image: url("@/static/images/ui-40/bg.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		color: #263444;
	}
	.login_box{
		width: 86vw;
		height: 110vw;
		margin: 4vw;
		padding: 3vw;
		background-color: rgba(255,255,255,.7);
		box-shadow: inset 1px 1px 10px 4px rgba(255, 255, 255, 1);
		border-radius:20px;
	}
	.login_titp{
		line-height: 50px;
		font-size: 20px;
		width: 100%;
		text-align: center;
		color: #000;
	}
	.login_title{
		font-size: 50upx;
		padding: 20upx;
	}
	.cu-form-group{
		//margin-bottom: 30px;
		border-radius: 40px;
		padding: 4px 20px;
		border: 2px solid #fff;
		background: #d9e6fc;
		input{
			padding: 4px 20px;
			line-height: 30px;
			height: 30px;
		}
	}
	.login_btn{
		text-align: center;
		display: block;
		padding: 60upx 0 0;
	}
	.login_btn image{
		width: 100%;
		height: 90upx;
	}
	.cu_btn{
		margin-top: 50rpx;
		background: linear-gradient( 180deg, #9dc1ff 0%, #508ffd 100%);
		height: 50px;
		width: 70vw;
		color: #fff;
		line-height: 50px;
		font-size: 16px;
		border-radius: 30px;
	}
	.cu-list {
		display: flex;
		align-items: center;
		gap: 50rpx;
		padding: 0 40rpx;
		margin-top: 50rpx;
		.cu-item {
			flex: 1;
			line-height: 80rpx;
			text-align: center;
			background: #4f8dfe;
			border-radius: 15rpx;
			color: #fff;
		}
		.cu-item:last-child {
			background: #b9b9b9;
		}
	}
	.container{
		padding: 10px;
	}
	.logo{
		padding: 120rpx 0 80rpx 0;
		text-align: center;
		image{
			width: 100px;
			height: 100px;
		}
	}
	
	.lg_img{
		width: 24px;
		height: 24px;
	}
	.padding-top-10 {
		padding-top: 10;
	}
</style>
